<template>
    <el-form size="large" class="login-content-form" :model="state.ruleForm" :rules="formRules" ref="formRef">
        <el-form-item class="login-animation1" prop="username">
            <el-input text :placeholder="$t('message.account.accountPlaceholder1')" v-model="state.ruleForm.username"
                clearable autocomplete="off">
                <template #prefix>
                    <el-icon class="el-input__icon"><ele-User /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2" prop="password">
            <el-input :type="state.isShowPassword ? 'text' : 'password'"
                :placeholder="$t('message.account.accountPlaceholder2')" v-model="state.ruleForm.password"
                autocomplete="off">
                <template #prefix>
                    <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
                </template>
                <template #suffix>
                    <i class="iconfont el-input__icon login-content-password"
                        :class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
                        @click="state.isShowPassword = !state.isShowPassword">
                    </i>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation3" prop="captcha">
            <el-col :span="15">
                <el-input text maxlength="6" minlength="6" :placeholder="$t('message.account.accountPlaceholder3')"
                    v-model="state.ruleForm.captcha" clearable autocomplete="off">
                    <template #prefix>
                        <el-icon class="el-input__icon"><ele-Position /></el-icon>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="8">
                <img class="login-content-code" v-waves :src="state.captchaImage" alt="获取验证码失败" @click="getCaptcha" />
            </el-col>
        </el-form-item>
        <el-form-item class="login-animation4">
            <el-button type="primary" class="login-content-submit" round style="font-size: 14px;font-weight: 500;" v-waves @click="onSignIn"
                :loading="state.loading.signIn">
                <span>{{ $t('message.account.accountBtnText') }}</span>
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="loginAccount">
import { reactive, computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { authGetCapcha, authLoginApi } from '/@/api/system/auth';
import { useUserInfo } from '/@/stores/userInfo';
import Cookies from 'js-cookie';

// 定义变量内容
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const formRef = ref()
const state = reactive({
    isShowPassword: false,
    captchaImage: '',
    ruleForm: {
        username: '',
        password: '',
        key: '',
        captcha: '',
    },
    loading: {
        signIn: false,
    },
});

// 获取校验码
const getCaptcha = () => {
    authGetCapcha().then(({ content }) => {
        state.captchaImage = content.b64s
        state.ruleForm.key = content.id
    })
}

// 表单校验
const formRules = ref({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
    captcha: [
        { required: true, message: '验证码不能为空', trigger: 'blur' }
    ],
})

onMounted(() => {
    getCaptcha()
})
// 时间获取
const currentTime = computed(() => {
    return formatAxis(new Date());
});
// 登录
const onSignIn = async () => {
    formRef.value.validate(async (valid: boolean) => {
        if (!valid) {
            return
        }
        // const { content } = await useLoginApi(state.ruleForm)
        authLoginApi(state.ruleForm).then(({ content }) => {
            state.loading.signIn = true;
            // 存储 token 到浏览器缓存
            Cookies.set('token', content['access_token']);
            useUserInfo().setUserInfos().then(() => {
                initBackEndControlRoutes().then(
                    (isNoPower) => {
                        signInSuccess(isNoPower);
                    }
                )
            }
            )
        }).catch(() => {
            getCaptcha()
        })
    })
};
// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined) => {
    if (isNoPower) {
        ElMessage.warning('抱歉，您没有登录权限');
        Session.clear();
    } else {
        // 初始化登录成功时间问候语
        let currentTimeInfo = currentTime.value;
        // 如果设置了首页就进入设置后的页面
        const { userInfos } = useUserInfo() as any
        if (userInfos?.redirect) {
            router.push({
                path: <string>userInfos?.redirect,
                query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
            });
        } else if (route.query?.redirect) {
            // 登录成功，跳到转首页
            // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
            router.push({
                path: <string>route.query?.redirect,
                query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
            });
        } else {
            router.push('/');
        }
        // 登录成功提示
        const signInText = t('message.signInText');
        ElMessage.success(`${currentTimeInfo}，${signInText}`);
        // 添加 loading，防止第一次进入界面时出现短暂空白
        NextLoading.start();
    }
    state.loading.signIn = false;
};
</script>

<style scoped lang="scss">
.login-content-form {
    margin-top: 20px;

    @for $i from 1 through 4 {
        .login-animation#{$i} {
            opacity: 0;
            animation-name: error-num;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            animation-delay: calc($i/10) + s;
        }
    }

    .login-content-password {
        display: inline-block;
        width: 20px;
        cursor: pointer;

        &:hover {
            color: #909399;
        }
    }

    .login-content-code {
        width: 100%;
        padding: 0;
        font-weight: bold;
        letter-spacing: 5px;
    }

    .login-content-submit {
        width: 100%;
        letter-spacing: 2px;
        font-weight: 300;
        margin-top: 15px;
    }
}
</style>